<template>
  <el-form :model="nodeModalForm" ref="nodeModal" label-placement="left" label-width="100px" :rules="nodeModalRules"
    size="small">
    <el-row :gutter="20">
      <el-col :span="10">
        <el-form-item label="节点名称" prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="是否分组" prop="isGroup">
          <el-switch v-model="nodeModalForm.isGroup"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="10" v-if="nodeModalForm.isGroup">
        <el-select prop="groupColumn" v-model="nodeModalForm.groupColumn" clearable filterable placeholder="分组列"
          class="fixed-icon w_100">
          <el-option v-for="item in fieldsList" :key="item.name" :label="item.alias" :value="item.alias">
            <span style="float: left">{{ item.alias }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.DATA_TYPE }}</span>
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <table border="1" align="center" class="add_table w_100" cellspacing="0">
      <tr>
        <th width="70"><span class="iconfont icon-Add cursor_point" @click="handleAddGroup"></span></th>
        <th>统计列</th>
        <th>统计类型</th>
        <th>新建列名/别名</th>
      </tr>
      <tr v-for="(item,index) in nodeModalForm.groups" :key="index">
        <td width="70">
          <span class="iconfont icon-Add cursor_point px_2" @click="handleAddGroup"></span>
          <span class="iconfont icon-close cursor_point px_2" @click="handleDeleteGroup(index)"></span>
        </td>
        <td>
          <el-select v-model="item.type" clearable filterable placeholder="统计类型" class="fixed-icon w_100">
            <el-option v-for="item in groupList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </td>
        <td>
          <el-select v-model="item.column" clearable filterable placeholder="统计列" class="fixed-icon w_100">
            <el-option v-for="item in filterFieldsList(item)" :key="item.name" :label="item.alias" :value="item.alias">
              <span style="float: left">{{ item.alias }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.DATA_TYPE }}</span>
            </el-option>
          </el-select>
        </td>
        <td>
          <el-input v-model.trim="item.alias" placeholder="列名/别名"></el-input>
        </td>
      </tr>
    </table>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain @click="handleConfigCancel">取消</el-button>
        <el-button type="primary" @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from "vue";
import { useEtlStore } from "../../../../../store/flowEtl";
import { numberType } from "../../../../../utils/constant";

export default defineComponent({
  name: "node-config-group",
  props: {
    node: Object,
  },
  components: {},
  setup(props, ctx) {
    const etlStore = useEtlStore();
    const nodeList = computed(() => etlStore.nodeList);
    const nodeConfigClose = inject("nodeConfigClose");
    const change = ref([]);
    const fieldsList = ref([]);
    const filterFieldsList = (group) => {
      if (!group || !group.type) {
        return [];
      } else {
        if (["avg", "max", "min", "sum"].includes(group.type)) {
          return fieldsList.value.filter((item) => {
            let regType = item.DATA_TYPE.replace(/[0-9]+/g, "");
            return numberType.includes(regType);
          });
        } else {
          return fieldsList.value;
        }
      }
    };
    const groupList = ref([
      {
        label: "平均值",
        value: "avg",
      },
      {
        label: "最大值",
        value: "max",
      },
      {
        label: "最小值",
        value: "min",
      },
      {
        label: "累加值",
        value: "sum",
      },
      {
        label: "列值数目",
        value: "count",
      },
    ]);
    const nodeModalForm = ref({
      nodeName: "",
      groupColumn: "",
      groups: [],
      isGroup: false,
    });
    const nodeModal = ref();
    const tableLoading = ref(false);
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: "请输入数据源名称",
        trigger: "blur",
      },
      groupColumn: {
        required: true,
        message: "请选择分组列",
        trigger: "change",
      },
    });
    const handleConfigCancel = () => {
      nodeConfigClose();
    };
    const nodeConfigUpdate = (node) => {
      if (!nodeModalForm.value.groups.length) {
        ElMessage.error("请选择要统计的列");
        return;
      }
      let aliasArr = nodeModalForm.value.groups.map((item) => item.alias);
      if (new Set([...aliasArr]).size !== aliasArr.length) {
        ElMessage.error("请修改重复的别名");
        return;
      }
      let fields = [];
      if (node.isGroup) {
        fields = fieldsList.value.filter(
          (item) => item.alias === node.groupColumn
        );
      }
      node.groups.forEach((ele) => {
        fields.push({
          COLUMN_COMMENT: ele.alias,
          COLUMN_NAME: ele.alias,
          DATA_TYPE: "integer",
          alias: ele.alias,
        });
      });
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true;
          item.nodeName = node.nodeName;
          item.config.groupColumn = node.groupColumn;
          item.config.groups = node.groups;
          item.config.isGroup = node.isGroup;
          item.config.fields = fields;
        }
        return item;
      });
      etlStore.setNodeList(nodes);
      nodeConfigClose();
    };
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value);
        } else {
          return false;
        }
      });
    };
    const resetForm = () => {
      nodeModalForm.value = {
        id: null,
        nodeName: "",
        groupColumn: "",
        groups: [],
        isGroup: false,
      };
      fieldsList.value = [];
    };
    const handleAddGroup = () => {
      nodeModalForm.value.groups.push({
        type: "",
        column: "",
        alias: "",
      });
    };
    const handleDeleteGroup = (index) => {
      nodeModalForm.value.groups.splice(index, 1);
    };
    onMounted(() => {
      resetForm();
      nodeModalForm.value = {
        id: props.node.id,
        nodeName: props.node.nodeName,
        groups: props.node.config.groups,
        groupColumn: props.node.config.groupColumn,
        isGroup: props.node.config.isGroup || false,
      };
      fieldsList.value = props.node.originFields;
    });
    return {
      groupList,
      change,
      nodeList,
      tableLoading,
      nodeModalForm,
      fieldsList,
      filterFieldsList,
      nodeModalRules,
      nodeModal,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      handleAddGroup,
      handleDeleteGroup,
      nodeConfigClose,
    };
  },
});
</script>

<style lang="less" scoped>
.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>